<template>
    <div class="headerstepstop">
        <div class="headersteps">
            <div :style="{
                transform: 'translateX(' + Number(actives) * (900 / Number(_icon)) + 'px)',
                width: `${900 / Number(_icon)}px`
            }" class="el-tabs__active-bar">
            </div>
            <el-steps :style="{
                width: '900px',
                '--el-color-primary': '#000',
            }
                " :active="Number(active)" align-center>
                <el-step class="cu" @click="next(0)" title="题目信息配置" :status="successstatus[0]">
                    <template #icon>1</template>
                </el-step>
                <el-step class="cu" @click="next(1)" title="题目内容配置" :status="successstatus[1]">
                    <template #icon>2</template>
                </el-step>
                <el-step class="cu" v-if="ruleForm.type === '代码'" @click="next(2)" title="测试点配置"
                    :status="successstatus[2]">
                    <template #icon>3</template>
                </el-step>
                <el-step class="cu" v-if="ruleForm.type === '代码' && ruleForm.isspecialjudge" @click="next(3)"
                    title="SPJ配置页" :status="successstatus[3]">
                    <template #icon>4</template>
                </el-step>
                <el-step title="添加成功" :status="successstatus[4]">
                    <template #icon>{{ _icon }}</template>
                </el-step>
            </el-steps>
        </div>
    </div>
</template>
<script setup lang="ts">
import { computed } from 'vue';
import { EMstatus } from '../../../interface';
import Studycodemodel from '../../../mysql_interface/studycodemodel';
type Isuccessstatus = [EMstatus, EMstatus, EMstatus, EMstatus, EMstatus]

const prop = defineProps<{ successstatus: Isuccessstatus, next: (num: 0 | 1 | 2 | 3 | 4) => void, active: string, ruleForm: Studycodemodel.Iquestion }>()


const _icon = computed(() => {
    let active = 5;
    if (prop.ruleForm.type != '代码') {
        active = active - 1
    }
    if (!prop.ruleForm.isspecialjudge) {
        active = active - 1
    }
    return active
})

const actives = computed(() => {
    if (prop.active == '4') {
        let active = 4;
        if (prop.ruleForm.type != '代码') {
            active = active - 1
        }
        if (!prop.ruleForm.isspecialjudge) {
            active = active - 1
        }
        return active
    }
    return Number(prop.active)
})

</script>

<style scoped>
.headersteps {
    width: 900px;
    margin: 0 auto;
    transform: translateX(0px);
    transition: transform 0.3s;
    padding-bottom: 8px;
}

.headerstepstop {
    transform: translateX(0px);
}

.headerstepstop::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.el-tabs__active-bar {
    /* width: 180px; */
    z-index: 10;
}
</style>

<style>
.headersteps {
    --main-font-weight: bold;
    --el-color-success: #67c23a;
    --success: var(--color-cheng);
    --finish: var(--el-color-success);
}

.headersteps .el-step__head {
    --bg-color: #000;
}

/* 成功 */
.headersteps .el-step__head.is-success {
    --bg-color: var(--success)
}

/* 选中 */
.headersteps .el-step__head.is-finish {
    --bg-color: var(--finish);
}

/* 未填写 */
.headersteps .el-step__head.is-wait {
    --bg-color: var(--el-text-color-placeholder);
}

.headersteps .el-step__icon {
    background-color: var(--bg-color);
    color: #fff;
    border-color: var(--bg-color) !important;
    border-radius: 50%;
    width: 24px !important;
}

.headersteps .el-step__title {
    font-size: 14px;
    font-weight: bold;
}

.headersteps .el-step__title.is-finish {
    color: var(--finish) !important;
}

.headersteps .el-step__title.is-success {
    font-weight: normal;
    color: var(--success) !important;
}

.headersteps .el-step__description.is-success {
    color: var(--success) !important;
    font-size: 12px;
}

.headersteps .el-step__description.is-finish {
    color: var(--finish) !important;
}

.headersteps .el-step__line {
    display: none;
}
</style>